<template>
  <header class="single-col-header">
    <div class="container clearfix">
    <h1 class="lg-logo-h1">
      <a class="lg-logo-link">
        <img :src="logo"/>
      </a>
    </h1>
    <TopNavBar></TopNavBar>
    <div class="link-group-main">
      <ul class="link-group-list clearfix">
        <li>
            <router-link to="/user/login" v-if="!user">
              <i class="user-new-ico">
                <icon name="user-circle-o"></icon>
              </i>
              <span>登录</span>
            </router-link>
            <router-link :to="{path:'/', param:{id: user.id}}" v-if="user">
              <span class="avatar">
              <img :src="user.headimgurl" />
              </span>
            </router-link>
            <router-link :to="{path:'/', param:{id: user.id}}" v-if="user">
              <span>{{ user.nickname }}</span>
            </router-link>
          </li>
          <!-- <li v-if="!user">
            <router-link to="/user/register">
              <i class="user-new-ico">
              <icon name="user-plus"></icon>
              </i>
              <span>注册</span>
            </router-link>
          </li>  -->
      </ul>
    </div>
    </div>
  </header>
</template>
<style>
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
</style>

<style lang="scss">
  @import "../scss/var.scss";

  header{
      // background-color: $color-primary;
  }

  .single-col-header {
    .router-link-active{
        text-decoration: none;
    }

    .lg-logo-link{
        float: left;
    }

    .container, .page-container {
        max-width: 1140px;
        margin: 0 auto;
        // height: 100%;
        box-sizing: border-box;
        box-sizing: border-box;
    }

    .lg-logo-h1{
        margin: 0 10px 0 0 ;
        overflow: hidden;
        float: left;
        height: 56px;
    }

    .lg-logo-link{
        overflow: hidden;
        margin-top:15px;

        img{
            width: 108px;
            display: block;
        }
    }

    .link-group-main{
        float: right;
    }

    .link-group-list{
        margin:0 5px 0 0;
        padding: 0;

        li{
            float: left;
            list-style: none;
            font-size: 14px;
            color: white;
            height: 56px;
            line-height: 56px;
            margin-left: 26px;
        }

        li:first-child{
            margin-left: 0;
        }

        a{
            color: #48576a;
            display: inline-block;
            line-height: normal;
            vertical-align:middle;
            font-size:12px;
            cursor:pointer;
            overflow:hidden;
            margin-top: 3px;
            text-decoration:none;

            i{
                display: block;
                margin-bottom: -2px;
                text-align: center;
            }
        }

    }

    .avatar {
      height: 40px;
      overflow: hidden;
      display: inline-block;
      border-radius: 50%;
      width: 40px;

      img {
        width: 100%;
      }
    }
  }
</style>

<script>
import TopNavBar from 'components/TopNavBar'
import Icon from 'vue-awesome/components/Icon.vue'
import 'vue-awesome/icons/user-circle-o'
import 'vue-awesome/icons/user-plus'
import Config from '../config/common'

import { mapState } from 'vuex'

export default {
  name: 'el-header',
  components: {
    'TopNavBar': TopNavBar,
    'icon': Icon
  },
  data () {
    return {
      logo: Config.IMG_HOST + '/crm-logo.png?1'
    }
  },
  computed: {
    ...mapState({
      user: state => state.auth.user
    })
  }
}
</script>
